<breadcrumb />

<mat-card>
  <mat-card-content>
    <section>
      <h2>Radio buttons in group</h2>
      <mat-radio-group name="seasons" [(ngModel)]="favoriteSeason" aria-label="Seasons">
        @for (season of seasonOptions; track $index) {
          <mat-radio-button [value]="season">{{ season }}</mat-radio-button>
        }
      </mat-radio-group>
    </section>

    <section>
      <h2>Radio buttons with align-end label position</h2>
      <mat-radio-group name="bread" align="end" aria-label="Breads">
        <mat-radio-button value="toast">Toast</mat-radio-button>
        <mat-radio-button value="biscuit">Biscuit</mat-radio-button>
        <mat-radio-button value="bagel">Bagel</mat-radio-button>
      </mat-radio-group>
    </section>

    <section>
      <h2>Disabled radio buttons</h2>
      <p>
        This section contains three radio buttons for "Yes", "No", and "Maybe". The "Maybe" radio
        button is disabled.
      </p>
      <mat-radio-button name="disable">Yes</mat-radio-button>
      <mat-radio-button name="disable">No</mat-radio-button>
      <mat-radio-button name="disable" [disabled]="true">Maybe</mat-radio-button>
    </section>

    <section>
      <h2>Radio buttons with different colors</h2>
      <mat-radio-button name="color">Default (accent)</mat-radio-button>
      <mat-radio-button name="color" color="primary">Primary</mat-radio-button>
      <mat-radio-button name="color" color="accent">Accent</mat-radio-button>
      <mat-radio-button name="color" color="warn">Warn</mat-radio-button>
    </section>
  </mat-card-content>
</mat-card>
